<!-- 受试者 -->
<template>
  <div>
    <s-table
      ref="table"
      rowKey="id"
      :columns="columns"
      bordered
      :data="loadData"
    >
      <template slot="title">
        <a-descriptions :title="$t('all.autotext433')"></a-descriptions>
        <div class="table-page-search-wrappers">
          <!-- 筛选区域 -->
          <a-form layout="inline">
            <a-row :gutter="48">
              <a-col :md="8" :sm="24">
                <a-form-item :label="$t('all.autotext357')">
                  <a-select v-model="queryParam.researchId" allowClear>
                    <a-select-option v-for="item in centerList" :value="item.id" :key="item.id">
                      {{ item.researchCenterNo }} - {{ item.orgName }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item :label="$t('all.autotext830')">
                  <a-select v-model="queryParam.ptsStatus" allowClear>
                    <a-select-option v-for="(item, index) in $const.PTS_STATUS" :value="item.value" :key="index">
                      {{ item.desc }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="4" :sm="24">
                <span class="table-page-search-submitButtons">
                  <a-button type="primary" @click="activeQuery">{{ $t('all.autotext30') }}</a-button>
                  <a-button style="margin-left: 8px" @click="resetParams">{{ $t('all.autotext340') }}</a-button>
                  <a-button
                    style="margin-left: 8px"
                    icon="export"
                    @click="clickExport"
                    :disabled="$store.state.user.project.status === 3"
                  >{{ $t('all.autotext1014') }}</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
          <a-button
            type="primary"
            icon="plus"
            @click="addInvitation()"
            :disabled="$store.state.user.project.status === 3"
          >
            {{ $t('all.autotext1462') }}
          </a-button>
        </div>
      </template>
      <template slot="orgName" slot-scope="text, record">
        <span>{{ record.researchCenterNo + '-' + record.orgName }} </span>
      </template>
      <template slot="ptsStatus" slot-scope="text, record">
        <span>{{ record.ptsStatus | filtersState }} </span>
      </template>
      <template slot="relation" slot-scope="text, record">
        <span>{{ record.relation | enumValueByKey($const.RELATION_TYPE) }} </span>
      </template>
      <template slot="authStatus" slot-scope="text, record">
        <span :style="record.authStatus | enumValueByKey($const.RELATION_WX, 'style')">• {{ record.authStatus | enumValueByKey($const.RELATION_WX) }} </span>
      </template>
      <template slot="ptsGender" slot-scope="text, record">
        <span>{{ record.ptsGender | filterGender }} </span>
      </template>
      <template slot="operation" slot-scope="text, record" v-if="$store.state.user.project.status !== 3">
        <template v-if="!centerClosed(record)">
          <a style="margin-right: 10px" v-if="record.ptsStatus === 6" @click="acticeView(record, 0)">{{ $t('all.autotext568') }}</a>
          <a style="margin-right: 10px" v-if="record.ptsStatus !== 6" @click="acticeView(record, 1)">{{ $t('all.autotext919') }}</a>
          <a-popconfirm
            :oktext="$t('all.autotext792')"
            :canceltext="$t('all.autotext975')"
            :title="$t('all.autotext104')"
            @confirm="actionDetail(record)"
          >
            <a
              style="margin-right: 10px"
              v-if="record.authStatus == 4  && record.ptsStatus !== 6"
            >{{ $t('all.autotext975') }}</a>
          </a-popconfirm>
          <a-popconfirm
            :title="record.authStatus === 5 ? $t('all.autotext224.1') : $t('all.autotext224.2')"
            @confirm="clickReinvite(record)"
          >
            <a
              style="margin-right: 10px"
              v-if="[2, 4, 5].includes(record.authStatus) && record.ptsStatus !== 6"
            >
              {{ record.authStatus === 5 ? $t('all.autotext262.0') : $t('all.autotext362') }}
            </a>
          </a-popconfirm>
          <a-popconfirm
            :title="$t('all.autotext98')"
            :ok-text="$t('all.autotext792')"
            :cancel-text="$t('all.autotext975')"
            @confirm="wxCalcel(record)"
          >
            <a
              style="margin-left: 10px"
              v-if="record.authStatus == 1  && record.ptsStatus !== 6"
            >{{ $t('all.autotext1298') }}</a>
          </a-popconfirm>
        </template>
      </template>
    </s-table>
    <!-- 添加受试者 -->
    <AddSubject
      ref="addSubject"
      v-model="visible"
      @ok="handleOk"
      :centerList="centerList"
      :datailId="datailId"
      @import="handleImport"
    />
    <!-- 查看弹窗 -->
    <ViewModal
      :visible="viewVisible"
      @close="closeViewModal"
      :uId="uId"
      :isEdit="isEdit"
      ref="viewModalRef"
    />
  </div>
</template>

<script>
import { list, addPts, delPts, canPts, getSubjectExport, reinviteSubject } from '@/api/overview/subject'
import { getContractCenter } from '@/api/overview/member.js'
import AddSubject from './addSubjectModal.vue'
import ViewModal from './subject/viewModal.vue' // 查看页面
import { exportExcel } from '@/utils/util'
let that
export default {
  props: {
    datailId: {
      type: [String, Number],
      default: null
    }
  },
  name: 'Subject',
  components: {
    AddSubject,
    ViewModal
  },
  data () {
    that = this
    return {
      columns: [], // CRC和其他的角色看到的columns不一样
      visible: false,
      viewVisible: false,
      centerList: [],
      uId: '',
      queryParam: {
        proId: ''
      },
      loadData: parameter => {
        return list(Object.assign(parameter, this.queryParam)).then(res => {
          return res
        })
      },
      isEdit: 0 // 0查看/1编辑受试者
    }
  },
  created () {
    const pd = localStorage.getItem('CURRENT_PROID')
    if (pd) {
      this.queryParam.proId = parseInt(pd)
    }
    // 如果有操作权限

    const columnsCrcVisible = [
      {
        title: this.$t('all.autotext949'),
        dataIndex: 'orgName',
        scopedSlots: { customRender: 'orgName' }
      },
      {
        title: this.$t('all.autotext1357'),
        dataIndex: 'ptsNo'
      },
      // {
      //   title: '姓名缩写',
      //   dataIndex: 'ptsName',
      //   scopedSlots: { customRender: 'ptsName' }
      // },
      {
        title: this.$t('all.autotext545'),
        dataIndex: 'ptsTypeName',
        scopedSlots: { customRender: 'ptsTypeName' }
      },
      {
        title: this.$t('all.autotext830'),
        dataIndex: 'ptsStatus',
        scopedSlots: { customRender: 'ptsStatus' }
      },
      {
        title: this.$t('all.autotext314'),
        dataIndex: 'relation',
        scopedSlots: { customRender: 'relation' }
      },
      {
        // 审批状态 1：接受 2：拒绝 3：待处理 4：待加入 5: 待邀请
        title: this.$t('all.autotext1384'),
        dataIndex: 'authStatus',
        scopedSlots: { customRender: 'authStatus' }
      },
      {
        title: this.$t('all.autotext187'),
        dataIndex: 'operation',
        scopedSlots: { customRender: 'operation' }
      }
    ]
    const columnsCrcInVisible = [
      {
        title: this.$t('all.autotext949'),
        dataIndex: 'orgName',
        scopedSlots: { customRender: 'orgName' }
      },
      {
        title: this.$t('all.autotext1357'),
        dataIndex: 'ptsNo'
      },
      // {
      //   title: '姓名缩写',
      //   dataIndex: 'ptsName',
      //   scopedSlots: { customRender: 'ptsName' }
      // },
      {
        title: this.$t('all.autotext545'),
        dataIndex: 'ptsTypeName',
        scopedSlots: { customRender: 'ptsTypeName' }
      },
      {
        title: this.$t('all.autotext830'),
        dataIndex: 'ptsStatus',
        scopedSlots: { customRender: 'ptsStatus' }
      },
      {
        title: this.$t('all.autotext314'),
        dataIndex: 'relation',
        scopedSlots: { customRender: 'relation' }
      },
      {
        title: this.$t('all.autotext187'),
        dataIndex: 'operation',
        scopedSlots: { customRender: 'operation' }
      }
    ]
    this.columns = this.$options.filters.isPtsVisible() ? columnsCrcVisible : columnsCrcInVisible


    this.getCenterList()
  },
  filters: {
    filtersState (val) {
      if (val === 1) {
        return that.$t('all.autotext912')
      } else if (val === 2) {
        return that.$t('all.autotext680')
      } else if (val === 3) {
        return that.$t('all.autotext978')
      } else if (val === 4) {
        return that.$t('all.autotext110')
      } else if (val === 5) {
        return that.$t('all.autotext985')
      } else if (val === 6) {
        return that.$t('all.autotext86')
      } else if (val === 7) {
        return that.$t('all.autotext1109')
      } else if (val === 8) {
        return that.$t('all.autotext691')
      } else if (val === 9) {
        return that.$t('all.autotext1163')
      }
    },
    filterGender (val) {
      if (val === -1) {
        return that.$t('all.autotext1048')
      } else if (val === 0) {
        return that.$t('all.autotext1218')
      } else if (val === 1) {
        return that.$t('all.autotext1007')
      }
    }
  },
  methods: {
    // 中心下拉列表
    getCenterList () {
      getContractCenter({ proId: this.queryParam.proId, deleted: 0 }).then(res => {
        this.centerList = res.content
      })
    },
    // 查询事件
    activeQuery () {
      this.$refs.table.refresh(true)
    },
    // 邀请
    addInvitation () {
      this.visible = true
    },
    // 清空params
    resetParams () {
      this.queryParam = {
        proId: this.queryParam.proId
      }
      this.$refs.table.refresh(true)
    },
    handleOk (val, type) {
      console.log(val)
      const arr = JSON.parse(JSON.stringify(val))
      arr.forEach(item => {
        item.orgName = item.siteOrgName
        delete item.key
        delete item.editable
        delete item.isNew
      })
      console.log('list', this.$refs.addSubject.data)
      addPts({
        type: type,
        proId: this.queryParam.proId,
        proManagePtsList: JSON.stringify(arr)
      }).then(res => {
        this.$message.success(this.$t('all.autotext470'))
        this.$refs.addSubject.data = [] // 清空数组
        this.visible = false
        this.$refs.table.refresh(true)
      })
    },
    // 中心关闭
    centerClosed ({ active }) {
      return +active === 2
    },
    // 打开查看弹窗
    acticeView (item, val) {
      this.viewSubject()
      this.uId = item.id
      this.viewVisible = true
      this.isEdit = val
    },
    // 重新邀请
    clickReinvite (record) {
      console.log(record, this.$t('all.autotext1118'))
      reinviteSubject({ id: record.id, ptsNo: record.ptsNo, proId: this.queryParam.proId, status: record.authStatus })
        .then(res => {
          this.$message.success(record.authStatus === 5 ? this.$t('all.autotext1511') : this.$t('all.autotext1205'))
          this.$refs.table.refresh(true)
        })
        .catch(() => {
          this.$message.error(record.authStatus === 5 ? this.$t('all.autotext262.1') : this.$t('all.autotext262.2'))
        })
    },
    wxCalcel (value) {
      canPts({ id: value.id })
        .then((res) => {
          this.$message.success(this.$t('all.autotext470'))
          this.$refs.table.refresh(true)
        })
        .catch(() => {
          this.$refs.table.refresh(true)
        })
    },
    actionDetail (value) {
      delPts({ id: value.id })
        .then(res => {
          console.log(res)
          this.$message.success(this.$t('all.autotext470'))
          this.$refs.table.refresh(true)
        })
        .catch(() => {
          this.$refs.table.refresh(true)
        })
    },
    // 关闭弹窗
    closeViewModal () {
      this.viewVisible = false
      this.$refs.table.refresh(true)
    },
    clickExport () {
      getSubjectExport({ proId: this.queryParam.proId, researchId: this.queryParam.researchId, ptsStatus: this.queryParam.ptsStatus })
        .then(res => {
          exportExcel(this.$t('all.autotext446'), res)
        })
        .catch(() => {})
    },
    // 查看受试者详情埋点
    viewSubject () {},
    // 导入成功回调
    handleImport () {
      this.visible = false
      this.$refs.table.refresh(true)
    }
  }
}
</script>
<style scoped lang="scss"></style>
